<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>医院设置列表</span>
      </div>

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="省份" prop="provinceCode">
          <el-select
            v-model="searchObj.provinceCode"
            placeholder="请选择省"
            @change="provinceChanged"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="cityCode">
          <el-select v-model="searchObj.cityCode" placeholder="请选择市">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="医院名称" prop="hosname">
          <el-input v-model="searchObj.hosname" placeholder="医院名称" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="resList" stripe>
        <el-table-column label="序号" align="center" width="55">
          <template slot-scope="scope">
            {{ (currentPage - 1) * currentSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="医院logo">
          <template slot-scope="scope">
            <img
              :src="'data:image/jpeg;base64,' + scope.row.logoData"
              width="80"
            />
          </template>
        </el-table-column>

        <el-table-column prop="hosname" label="医院名称" />
        <el-table-column prop="param.hostypeString" label="等级" width="90" />
        <el-table-column prop="param.fullAddress" label="详情地址" />
        <el-table-column align="center" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === 1 ? 'primary' : 'danger'"
              disable-transitions
            >
              {{ scope.row.status === 1 ? "上线" : "下线" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleView(scope.row.id)"
              >查看</el-button
            >
            <router-link
              :to="'/hospSet/hospital/schedule/' + scope.row.hoscode"
            >
              <el-button type="text" size="mini">排班</el-button>
            </router-link>
            <el-button
              v-if="scope.row.status == 1"
              type="text"
              size="mini"
              @click="updateStatus(scope.row.id, 0)"
              >下线</el-button
            >
            <el-button
              v-if="scope.row.status == 0"
              type="text"
              size="mini"
              @click="updateStatus(scope.row.id, 1)"
              >上线</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-show="total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 25, 30, 50]"
        :page-size="currentSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </el-card>

    <!-- 详情 -->
    <el-dialog title="医院详情" :visible.sync="open" width="70%" append-to-body>
      <div>
        <el-descriptions class="margin-top" title="基本信息" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              医院名称
            </template>
            {{ hospital.hosname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              医院logo
            </template>
            <img
              :src="'data:image/jpeg;base64,' + hospital.logoData"
              width="80"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              医院编码
            </template>
            {{ hospital.hoscode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              地址
            </template>
            {{ hospital.param ? hospital.param.fullAddress : "" }}
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              坐车路线
            </template>
            {{ hospital.route }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              医院简介
            </template>
            {{ hospital.intro }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          class="margin-top mt20"
          title="预约规则信息"
          :column="2"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              预约周期
            </template>
            {{ bookingRule.cycle }}天
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              放号时间
            </template>
            {{ bookingRule.releaseTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              停挂时间
            </template>
            {{ bookingRule.stopTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              退号时间
            </template>
            {{ bookingRule.quitDay == -1 ? "就诊前一工作日" : "就诊当日"
            }}{{ bookingRule.quitTime }} 前取消
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              预约规则
            </template>
            <ol>
              <li v-for="item in bookingRule.rule" :key="item">{{ item }}</li>
            </ol>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPageList as getHospList,
  findByDictCode,
  findChildId,
  updateStatus,
  getHospById
} from "@/api/hosp";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      currentPage: 1,
      currentSize: 10,
      searchObj: {
        provinceCode: "",
        cityCode: ""
      },
      resList: [],
      total: 0,
      provinceList: [], //所有省集合
      cityList: [], //所有市集合
      // 是否显示弹出层
      open: false,
      hospital: {}, //医院信息
      bookingRule: {} //预约信息
    };
  },
  created() {
    this.getList();
    //调用查询所有省的方法
    this.findAllProvince();
  },
  methods: {
    getList() {
      this.loading = true;
      getHospList(this.currentPage, this.currentSize, this.searchObj)
        .then(response => {
          this.resList = response.data.content;
          this.total = response.data.totalElements;
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.currentSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleQuery() {
      this.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.currentPage = 1;
      this.currentSize = 10;
      this.searchObj = {
        provinceCode: "",
        cityCode: ""
      };
      this.getList();
    },
    //查询所有省
    findAllProvince() {
      findByDictCode("Province").then(response => {
        this.provinceList = response.data;
      });
    },
    //点击某个省，显示里面市（联动）
    provinceChanged() {
      //初始化值
      this.cityList = [];
      this.searchObj.cityCode = "";
      //调用方法，根据省id，查询下面子节点
      findChildId(this.searchObj.provinceCode).then(response => {
        this.cityList = response.data;
      });
    },
    //更新医院上线状态
    updateStatus(id, status) {
      updateStatus(id, status).then(response => {
        this.$message({ type: "success", message: "操作成功!" });
        this.getList();
      });
    },
    handleView(id) {
      getHospById(id).then(response => {
        this.hospital = response.data.hospital;
        this.bookingRule = response.data.bookingRule;
        this.open = true;
      });
    }
  }
};
</script>
